<template>
	<el-main>
		<el-card class="box-card" shadow="never">
			<el-tabs v-model="activeName">
				<el-tab-pane label="基础设置" name="1">
					<el-form label-position="right" label-width="80px" ref="form" :model="form" :rules="rules">
						<el-form-item label="商品类型" prop="type" class="goods-type">
							<ul class="goods-type" style="height: 100%">
								<li :class="{ 'goods-type-active': form.type == 1 }" @click="checkType(1)">
									<div style="margin-top: 5%">普通商品</div>
									<div style="color: #999; font-size: 12px">(物流发货)</div>
									<span class="icon"></span>
								</li>
								<li :class="{ 'goods-type-active': form.type == 2, }" @click="checkType(2)"
									style="margin-left: 10px">
									<div style="margin-top: 5%">虚拟商品</div>
									<div style="color: #999; font-size: 12px">(无需物流)</div>
									<span class="icon"></span>
								</li>
								<li :class="{ 'goods-type-active': form.type == 3, }" @click="checkType(3)"
									style="margin-left: 10px">
									<div style="margin-top: 5%">卡密商品</div>
									<div style="color: #999; font-size: 12px">(自动发货)</div>
									<span class="icon"></span>
								</li>
							</ul>
						</el-form-item>
						<el-form-item label="平台分类" prop="cate_id">
							<el-cascader :options="cate" :props="props" v-model="form.cate_id" style="width: 500px"
								clearable>
							</el-cascader>
						</el-form-item>
						<el-form-item label="商家分类" prop="seller_cate_id">
							<el-cascader :options="seller_cate" :props="props" v-model="form.seller_cate_id"
								style="width: 500px" clearable>
							</el-cascader>
						</el-form-item>
						<el-form-item label="商品名称" prop="name">
							<el-input v-model="form.name" style="width: 500px"></el-input>
						</el-form-item>
						<el-form-item label="副标题">
							<el-input type="textarea" v-model="form.sub_name" style="width: 500px"></el-input>
						</el-form-item>
						<el-form-item label="单位" prop="unit">
							<el-input v-model="form.unit" style="width: 500px"></el-input>
						</el-form-item>
						<el-form-item label="商品图" prop="slider_image" style="margin-bottom: 0">
							<ul class="img-list" style="display: flex">
								<draggable v-model="form.slider_image" animation="200" item-key="id" group="goodsImg">
									<template #item="{ element, index }">
										<li>
											<img :src="element" alt="图片" style="width: 58px;height: 58px" />
											<div class="img-tools">
												<el-icon>
													<component :is="deleteIcon" style="font-size: 14px; color: #fff"
														@click="removeSlider(index)" />
												</el-icon>
											</div>
										</li>
									</template>
								</draggable>
								<li>
									<div class="addImg" @click="showImage">
										<el-icon>
											<component :is="plusIcon" />
										</el-icon>
									</div>
								</li>
							</ul>
						</el-form-item>
						<p class="tips">
							建议尺寸：800*800，可拖拽改变图片顺序，默认首张图为主图，最多上传8张
						</p>
						<el-form-item label="商品视频" style="margin-bottom: 0px">
							<ul class="img-list">
								<li>
									<el-upload class="upload-demo" :action="uploadUrl" :on-success="videoHandle"
										:before-upload="beforeVideoUpload" :limit="1">
										<div class="addImg" @click="showImage">
											<el-icon>
												<component :is="plusIcon" />
											</el-icon>
										</div>
									</el-upload>
								</li>
								<li style="
										width: 300px;
										height: 150px;
										margin-left: 100px;
									" v-if="form.video_src">
									<video width="300" height="150" controls="">
										<source :src="form.video_src" type="video/mp4" />
										您的浏览器不支持 video 标签。
									</video>
								</li>
							</ul>
						</el-form-item>
						<p class="tips">
							PHP默认上传限制为2MB，需要在php.ini配置文件中修改“post_max_size”和“upload_max_filesize”的大小。
							必须上传.mp4视频格式
						</p>
						<!--<el-form-item label="是否上架" prop="is_show">
							<el-radio v-model="form.is_show" label="1">上架</el-radio>
							<el-radio v-model="form.is_show" label="2">下架</el-radio>
						</el-form-item>-->
						<el-form-item>
							<el-button type="primary" @click="next">下一步</el-button>
							<el-button type="primary" @click="saveGoods" v-if="form.id > 0">保存</el-button>
						</el-form-item>
					</el-form>
				</el-tab-pane>
				<el-tab-pane label="规格库存" name="2">
					<el-form label-position="left" label-width="80px" ref="form" :model="form" :rules="rules">
						<el-form-item label="商品规格" prop="spec" v-if="form.type != 3">
							<el-radio v-model="form.spec" label="1">单规格</el-radio>
							<el-radio v-model="form.spec" label="2">多规格</el-radio>
						</el-form-item>
						<div v-if="form.spec == 1">
							<!-- <el-form-item label="售价">
								<el-input type="number" v-model="form.price" style="width: 500px"></el-input>
								元
							</el-form-item>
							<el-form-item label="划线价">
								<el-input type="number" v-model="form.original_price" style="width: 500px"></el-input>
								元
							</el-form-item> -->
							<el-form-item label="成本价">
								<el-input type="number" v-model="form.cost_price" style="width: 500px"></el-input>
								元
							</el-form-item>
							<el-form-item label="建议售价">
								<el-input type="number" v-model="form.cost_price" style="width: 500px"></el-input>
								元
							</el-form-item>
							<el-form-item label="原价">
								<el-input type="number" v-model="form.cost_price" style="width: 500px"></el-input>
								元
							</el-form-item>
							<el-form-item label="库存" v-if="form.type != 3">
								<el-input type="number" v-model="form.stock" style="width: 500px"></el-input>
							</el-form-item>
							<el-form-item label="商品编号">
								<el-input type="number" v-model="form.spu" style="width: 500px"></el-input>
							</el-form-item>
							<el-form-item label="重量">
								<el-input type="number" v-model="form.weight" style="width: 500px"></el-input>
								KG
							</el-form-item>
							<el-form-item label="体积">
								<el-input type="number" v-model="form.volume" style="width: 500px"></el-input>
								m³
							</el-form-item>
						</div>
						<div style="margin-bottom: 20px" v-else>
							<el-form-item label="选择规格">
								<el-select v-model="selectRule" placeholder="请选择" style="width: 300px"
									@change="handleSelectRule">
									<el-option v-for="item in rule" :key="item.id" :label="item.name" :value="item.id">
									</el-option>
								</el-select>
								<!--<el-button icon="el-icon-plus" type="primary" >添加新规格</el-button>-->
							</el-form-item>
							<div class="table-box">
								<div style="float: right; margin-bottom: 10px">
									<el-button type="primary" icon="el-icon-plus" @click="addRule">新的规格</el-button>
									<el-button type="primary" icon="el-icon-cpu" @click="makeRule">生成属性</el-button>
								</div>
								<el-table :data="preItem" border style="width: 100%">
									<el-table-column label="规格名" width="200">
										<template #default="scope">
											<el-input placeholder="规格名" style="width: 150px"
												v-model="scope.row.title"></el-input>
											<i class="el-icon-delete del-btn" @click="delTitle(scope.$index)"></i>
										</template>
									</el-table-column>
									<el-table-column label="规格值">
										<template #default="scope">
											<div style="
													display: flex;
													flex-flow: row wrap;
												">
												<div style="
														width: 180px;
														float: left;
														margin-top: 5px;
													" v-for="(vo, index) in scope.row.item" :key="index">
													<el-input placeholder="规格值" style="width: 150px"
														v-model="scope.row.item[index]"></el-input>
													<el-icon @click="delItem(scope.$index, index)" class="del-btn">
														<el-icon-delete />
													</el-icon>
												</div>
												<div class="item-tool" @click="addNewItem(scope.$index)">
													<el-icon>
														<el-icon-plus />
													</el-icon>
													添加
												</div>
											</div>
										</template>
									</el-table-column>
								</el-table>
								<div v-if="final.length > 0">
									<el-form-item label="批量设置" style="margin-top: 10px">
										<el-button-group>
											<el-button type="primary" size="small" @click="batchDialogVisible = true">
												图片
											</el-button>
											<el-button type="primary" size="small" @click="setBatch('price', '售价')">
												售价
											</el-button>
											<el-button type="primary" size="small" @click="setBatch('price', '建议售价')">
												建议售价
											</el-button>
											<el-button type="primary" size="small" @click="setBatch('price', '划线价')">
												划线价
											</el-button>
											<el-button type="primary" size="small"
												@click="setBatch('cost_price', '成本价')">成本价
											</el-button>
											<el-button type="primary" size="small"
												@click="setBatch('original_price', '原价')">原价
											</el-button>
											<el-button type="primary" size="small" @click="setBatch('stock', '库存')">
												库存
											</el-button>
											<el-button type="primary" size="small" @click="setBatch('spu', '商品编号')">
												商品编号
											</el-button>
											<el-button type="primary" size="small" @click="setBatch('weight', '重量')">
												重量
											</el-button>
											<el-button type="primary" size="small" @click="setBatch('volume', '体积')">
												体积
											</el-button>
										</el-button-group>
									</el-form-item>
									<el-table :data="final" border style="width: 100%">
										<el-table-column v-for="(item, index) in tableHead" :label="item.label"
											width="150" :key="index">
											<template #default="scope">
												{{ scope.row.sku[item.property] }}
											</template>
										</el-table-column>
										<el-table-column label="图片" width="100">
											<template #default="scope">
												<div class="up-item-img" v-if="scope.row.image == ''"
													@click="setOneImg(scope.$index)">
													<el-icon>
														<component :is="plusIcon" />
													</el-icon>
												</div>
												<img style="width: 50px;height: 45px;" :src="scope.row.image"
													v-if="scope.row.image" />
												<div class="img-tools" v-if="scope.row.image"
													@click="rmImg(scope.$index)">
													<el-icon>
														<component :is="deleteIcon"
															style="font-size: 14px;color:#fff;" />
													</el-icon>
												</div>
											</template>
										</el-table-column>
										<el-table-column label="售价" width="150">
											<template #default="scope">
												<el-input v-model="scope.row.price" type="number"></el-input>
											</template>
										</el-table-column>
										<el-table-column label="建议售价" width="150">
											<template #default="scope">
												<el-input v-model="scope.row.price" type="number"></el-input>
											</template>
										</el-table-column>
										<el-table-column label="划线价" width="150">
											<template #default="scope">
												<el-input v-model="scope.row.price" type="number"></el-input>
											</template>
										</el-table-column>
										<!-- 成本价和原价 不展示给用户 记得做判断 -->
										<el-table-column label="成本价" width="150">
											<template #default="scope">
												<el-input v-model="scope.row.cost_price" type="number"></el-input>
											</template>
										</el-table-column>
										<el-table-column label="原价" width="150">
											<template #default="scope">
												<el-input v-model="scope.row.original_price" type="number"></el-input>
											</template>
										</el-table-column>
										<el-table-column label="库存" width="150">
											<template #default="scope">
												<el-input v-model="scope.row.stock" type="number"></el-input>
											</template>
										</el-table-column>
										<el-table-column label="商品编号" width="150">
											<template #default="scope">
												<el-input v-model="scope.row.spu"></el-input>
											</template>
										</el-table-column>
										<el-table-column label="重量(KG)" width="150">
											<template #default="scope">
												<el-input v-model="scope.row.weight" type="number"></el-input>
											</template>
										</el-table-column>
										<el-table-column label="体积(m³)" width="150">
											<template #default="scope">
												<el-input v-model="scope.row.volume" type="number"></el-input>
											</template>
										</el-table-column>
										<el-table-column label="操作" fixed="right" width="150">
											<template #default="scope">
												<el-button @click="handleDel(scope.$index)" type="text">删除</el-button>
											</template>
										</el-table-column>
									</el-table>
								</div>
							</div>
							<el-alert style="width: 600px; margin-top: 10px" title="选择规格之后，点击 '生成属性' 则可以自动生成商品的属性列表。"
								type="warning" :closable="false">
							</el-alert>
						</div>
						<el-form-item label="卡密管理" v-if="form.type == 3 && !id">
							<span class="card-info" @click="showCard">卡密内容【{{ cardNum }}】</span>
						</el-form-item>
						<el-form-item style="margin-top: 10px">
							<el-button @click="pre">上一步</el-button>
							<el-button type="primary" @click="ruleNext">下一步</el-button>
							<el-button type="primary" @click="saveGoods" v-if="form.id > 0">保存</el-button>
						</el-form-item>

						<el-dialog :title="`设置${batchTitle}`" v-model="batchVisible" width="500px">
							<el-form :model="batchForm" label-width="80px">
								<el-form-item :label="batchTitle">
									<el-input v-model="batchForm.field" autocomplete="off"
										v-if="batchTitle == '商品编号'"></el-input>
									<el-input v-model="batchForm.field" autocomplete="off" type="number"
										v-else></el-input>
								</el-form-item>
							</el-form>
							<div class="dialog-footer">
								<el-button @click="batchVisible = false">取 消</el-button>
								<el-button type="primary" @click="batchFormSubmit">确 定</el-button>
							</div>
						</el-dialog>
					</el-form>
				</el-tab-pane>
				<el-tab-pane label="商品详情" name="3">
					<sc-editor v-model="form.content" :height="600"></sc-editor>
					<el-form :model="form" label-width="100px" style="margin-top: 20px">
						<el-form-item>
							<el-button @click="pre">上一步</el-button>
							<el-button type="primary" @click="next">下一步</el-button>
						</el-form-item>
					</el-form>
				</el-tab-pane>
				<el-tab-pane label="物流配置" name="4" v-if="showExpress">
					<el-form ref="form" :model="form" label-width="80px">
						<el-form-item label="邮费设置">
							<el-radio-group v-model="form.freight">
								<el-radio :label="1">固定运费</el-radio>
								<el-radio :label="2">运费模板</el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item label="邮费" v-if="form.freight == 1">
							<el-input v-model="form.postage" type="number" placeholder=""
								style="width: 500px"></el-input>
						</el-form-item>
						<el-form-item label="运费模板" v-if="form.freight == 2">
							<el-select v-model="form.shipping_tpl_id" placeholder="请选择" style="width: 500px">
								<el-option v-for="item in tpl" :key="item.id" :label="item.name" :value="item.id">
								</el-option>
							</el-select>
						</el-form-item>

						<div style="margin-top: 10px; margin-left: 80px">
							<el-button @click="pre">上一步</el-button>
							<el-button type="primary" @click="next">下一步</el-button>
						</div>
					</el-form>
				</el-tab-pane>
				<el-tab-pane label="其他设置" name="5">
					<el-form label-position="left" label-width="80px" ref="form" :model="form" :rules="rules">
						<el-form-item label="seo标题">
							<el-input v-model="form.seo_title" style="width: 500px"></el-input>
						</el-form-item>
						<el-form-item label="seo关键词">
							<el-input v-model="form.seo_keywords" style="width: 500px"></el-input>
						</el-form-item>
						<el-form-item label="seo描述">
							<el-input type="textarea" v-model="form.seo_desc" style="width: 500px"></el-input>
						</el-form-item>

						<el-form-item label="商品参数">
							<el-select v-model="form.attr_tpl_id" placeholder="请选择" style="width: 365px;"
								@change="handleSelectTpl" clearable>
								<el-option v-for="item in attr" :key="item.id" :label="item.name" :value="item.id">
								</el-option>
							</el-select>
							<el-button icon="el-icon-plus" type="primary" @click="addAttr"
								style="margin-left: 10px">添加新参数</el-button>
						</el-form-item>
						<div v-if="attr_table.length > 0">
							<el-table :data="attr_table" border style="width: 600px">
								<el-table-column label="参数名">
									<template #default="scope">
										<el-input v-model="scope.row.item"></el-input>
									</template>
								</el-table-column>
								<el-table-column label="参数值">
									<template #default="scope">
										<el-input v-model="scope.row.value"></el-input>
									</template>
								</el-table-column>
								<el-table-column label="" width="60px">
									<template #default="scope">
										<el-icon size="14" color="#fff">
											<component :is="deleteIcon" @click="rmAttr(scope.$index)" />
										</el-icon>
									</template>
								</el-table-column>
							</el-table>
						</div>
						<el-form-item label="商品推荐">
							<el-checkbox true-label="1" false-label="2" v-model="form.is_hot">热卖</el-checkbox>
							<el-checkbox true-label="1" false-label="2" v-model="form.is_recommend">推荐</el-checkbox>
							<el-checkbox true-label="1" false-label="2" v-model="form.is_new">新品</el-checkbox>
						</el-form-item>
						<el-form-item label="客户标签">
							<el-select v-model="label_id" multiple placeholder="请选择" style="width: 500px">
								<el-option v-for="item in label" :key="item.value" :label="item.name"
									:value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="保障服务">
							<el-select v-model="form.ensure" multiple placeholder="请选择" style="width: 500px">
								<el-option v-for="item in ensureList" :key="item.id" :label="item.name"
									:value="item.id">
								</el-option>
							</el-select>
						</el-form-item>
						<div style="margin-top: 10px;margin-left: 80px">
							<el-button @click="pre">上一步</el-button>
							<el-button type="primary" @click="saveGoods">保存</el-button>
						</div>
					</el-form>
				</el-tab-pane>
			</el-tabs>
		</el-card>
	</el-main>

	<el-dialog title="" v-model="dialogVisible" width="1200px" class="image-check-dialog">
		<Attachment :need-select="true" @selected-img="selectedImg" @close-dialog="dialogVisible = false"
			:select-num="slider_limit"></Attachment>
	</el-dialog>

	<el-dialog title="" v-model="batchDialogVisible" width="1200px" class="image-check-dialog">
		<Attachment :need-select="true" @selected-img="selectedBatchImg" @close-dialog="batchDialogVisible = false"
			:select-num="slider_batch_limit"></Attachment>
	</el-dialog>

	<el-dialog title="设置卡密" v-model="cardVisible" width="600px" :close-on-click-modal="false">
		<el-form ref="form" :model="form.cardForm" label-width="80px">
			<el-form-item label="卡密类型">
				<el-radio v-model="form.cardForm.type" :label="1">固定卡密</el-radio>
				<el-radio v-model="form.cardForm.type" :label="2">一次性秘钥</el-radio>
			</el-form-item>
			<el-form-item label="卡密内容" v-if="form.cardForm.type == 1">
				<el-col :span="11">
					<el-input v-model="form.cardForm.card_no" placeholder="请输入卡号(非必填)"></el-input>
				</el-col>
				<el-col class="line" :span="2" style="text-align: center">-</el-col>
				<el-col :span="11">
					<el-input v-model="form.cardForm.card_secret" placeholder="请输入卡密"></el-input>
				</el-col>
			</el-form-item>
			<el-form-item label="卡密数量" v-if="form.cardForm.type == 1">
				<el-input v-model="form.cardForm.num" type="number"></el-input>
			</el-form-item>
			<el-form-item label="卡密内容" v-if="form.cardForm.type == 2">
				<el-input type="textarea" v-model="form.cardForm.card_no_list" :rows="8"></el-input>
				<p style="font-size: 12px;padding: 0">
					添加卡密格式为卡号+英文(,)+密码，一行一组，如202309170001,123123<br />如果只有卡密没有卡号，则一行填写一个卡密即可</p>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="saveCard">确定</el-button>
			</el-form-item>
		</el-form>
	</el-dialog>
</template>

<script>
import config from "@/config";
import Attachment from "@/components/attachment";
import { defineAsyncComponent } from "vue";
import draggable from 'vuedraggable'

const scEditor = defineAsyncComponent(() => import("@/components/scEditor"));

export default {
	name: "goodsAdd",
	components: {
		Attachment,
		scEditor,
		draggable
	},
	data() {
		return {
			activeName: "1",
			dialogVisible: false,
			cardVisible: false,
			batchDialogVisible: false,
			selectImgIndex: -1,
			rule: {},
			cate: [],
			seller_cate: [],
			attr: [],
			label: {},
			tpl: {},
			treeProps: {
				value: "id",
				label: "name",
				children: "children",
				checkStrictly: true,
			},
			preItem: [],
			final: [],
			ruleItem: {
				title: "",
				item: [""],
			},
			cateId: [],
			tableHead: [],
			ruleTableItem: {
				sku: [],
				image: "",
				price: "0.00",
				cost_price: "0.00",
				original_price: "0.00",
				stock: 0,
				spu: "",
				weight: "0.00",
				volume: "0.00",
			},
			selectRule: "",
			attr_table: [],
			label_id: [],
			form: {
				type: 1,
				cate_id: [],
				seller_cate_id: [],
				name: "",
				sub_name: "",
				unit: "个",
				slider_image: [],
				video_src: "",
				is_show: "2",
				spec: "1",
				price: "0.00",
				original_price: "0.00",
				cost_price: "0.00",
				stock: 0,
				spu: "",
				weight: "0.00",
				volume: "0.00",
				preItem: [],
				final: [],
				content: "",
				freight: 1,
				postage: "0.00",
				shipping_tpl_id: "",
				seo_title: "",
				seo_keywords: "",
				seo_desc: "",
				attr_tpl_id: "",
				attr_item: [],
				attr_value: [],
				is_hot: "",
				is_recommend: "",
				is_new: "",
				label_id: "",
				cardForm: {
					type: 1,
					card_no: "",
					card_secret: "",
					num: 0,
					card_no_list: "",
				},
				ensure: []
			},
			slider_limit: 8,
			slider_batch_limit: 1,
			rules: {
				type: [
					{
						required: true,
						message: "请选择商品类型",
						trigger: "blur",
					},
				],
				cate_id: [
					{
						required: true,
						message: "请选择商品分类",
						trigger: "blur",
					},
				],
				name: [
					{
						required: true,
						message: "请输入商品名称",
						trigger: "blur",
					},
				],
				unit: [
					{ required: true, message: "请输入单位", trigger: "blur" },
				],
				slider_image: [
					{
						required: true,
						message: "请请选择商品图",
						trigger: "blur",
					},
				],
				is_show: [
					{
						required: true,
						message: "请选择是否上架",
						trigger: "blur",
					},
				],
				spec: [
					{ required: true, message: "请选择规格", trigger: "blur" },
				],
			},
			batchTitle: "",
			batchVisible: false,
			setField: "",
			batchForm: {
				field: "",
			},
			showExpress: true,
			props: {
				multiple: true,
				label: "name",
				value: "id",
				children: "children",
			},
			cardNum: 0,
			id: 0,
			plusIcon: "el-icon-plus",
			deleteIcon: "el-icon-delete",
			uploadUrl: config.API_URL + "/admin/attachment/uploadFile",
		};
	},
	watch: {
		"form.type": function (newVal) {
			if (newVal == 2 || newVal == 3) {
				this.showExpress = false;
			} else {
				this.showExpress = true;
			}
		},
	},
	mounted() {
		this.id = this.$route.query.id

		if (this.id) {
			this.initEdit()
		} else {
			this.getBaseInfo()
		}
	},
	methods: {
		// 获取基础信息
		async getBaseInfo() {
			let res = await this.$API.goods.getAddInfo.get();

			this.rule = res.data.rule;
			this.cate = res.data.cate.map((item) => {
				if (!item.children) {
					item.disabled = true;
				}

				return item;
			});
			this.seller_cate = res.data.seller_cate.map((item) => {
				if (!item.children) {
					item.disabled = true;
				}

				return item;
			});
			this.attr = res.data.attr;
			this.label = res.data.label;
			this.tpl = res.data.tpl;
			this.ensureList = res.data.ensure
		},
		// 选择商品类型
		checkType(type) {
			this.form.type = type;
		},
		// 下一步
		next() {
			if (
				(this.form.type == 2 || this.form.type == 3) &&
				this.activeName == 3
			) {
				this.activeName = parseInt(this.activeName) + 2 + "";
			} else {
				this.activeName = parseInt(this.activeName) + 1 + "";
			}
		},
		// 上一步
		pre() {
			if (
				(this.form.type == 2 || this.form.type == 3) &&
				this.activeName == 5
			) {
				this.activeName = parseInt(this.activeName) - 2 + "";
			} else {
				this.activeName = parseInt(this.activeName) - 1 + "";
			}
		},
		// 选择了图片
		selectedImg(item) {
			if (
				this.form.slider_image.length + item.length >
				this.slider_limit
			) {
				this.$message.error(
					"您还可以选择" +
					(this.slider_limit -
						parseInt(
							this.form.slider_image.length + item.length
						)) +
					"张商品图"
				);
				return false;
			}
			item.forEach((vo) => {
				this.form.slider_image.push(vo.url);
			});
			this.dialogVisible = false;
		},
		// 删除图片
		removeSlider(index) {
			this.form.slider_image.splice(index, 1);
		},
		// 选择图
		showImage() {
			this.dialogVisible = true;
		},
		// 上传视频
		videoHandle(item) {
			this.form.video_src = item.data.url;
		},
		beforeVideoUpload(file) {
			const isMP4 = file.type === "video/mp4";
			if (!isMP4) {
				this.$message.error("上传视频图片只能是 MP4 格式!");
			}

			return isMP4;
		},
		// 删除规格
		delItem(tableIndex, index) {
			this.preItem[tableIndex].item.splice(index, 1);
		},
		addRule() {
			let item = JSON.parse(JSON.stringify(this.ruleItem));
			this.preItem.push(item);
		},
		// 生成规则
		makeRule() {
			let titleMap = [];
			let preList = [];
			this.preItem.forEach((item, index) => {
				let data = item.item.filter(function (s) {
					return s && s.trim();
				});
				if (item.title != "" && data.length > 0) {
					titleMap.push({ label: item.title, property: index });
					preList.push(item.item);
				}
			});

			let descartes = this.calcDescartes(preList);
			this.final = [];
			this.ruleTableItem = {
				sku: [],
				image: "",
				price: "0.00",
				cost_price: "0.00",
				original_price: "0.00",
				stock: 0,
				spu: "",
				weight: "0.00",
				volume: "0.00",
			};
			descartes.forEach((item) => {
				if (item instanceof Array) {
					let len = item.length;
					item.forEach((vo, index) => {
						if (!vo) {
							item.splice(index, 1);
						}
					});

					if (len != item.length) {
						return;
					}
				} else if (item == "") {
					return;
				}

				this.ruleTableItem.sku = item instanceof Array ? item : [item];
				let tableIem = JSON.parse(JSON.stringify(this.ruleTableItem));
				this.final.push(tableIem);
			});
			this.tableHead = titleMap;
		},
		// 删除规格标题
		delTitle(index) {
			this.preItem.splice(index, 1);
		},
		// 添加新的节点
		addNewItem(index) {
			this.preItem[index].item.push("");
		},
		// 计算笛卡尔积
		calcDescartes(array) {
			if (array.length < 2) return array[0] || [];

			return array.reduce((total, currentValue) => {
				let res = [];

				total.forEach((t) => {
					currentValue.forEach((cv) => {
						if (t instanceof Array)
							// 或者使用 Array.isArray(t)
							res.push([...t, cv]);
						else res.push([t, cv]);
					});
				});
				return res;
			});
		},
		// 批量设置
		setBatch(field, title) {
			this.batchTitle = title;
			this.batchVisible = true;
			this.setField = field;
		},
		// 批量设置
		batchFormSubmit() {
			if (this.batchForm.field == "") {
				this.$message.error("请输入正确的值");
				return false;
			}

			this.final.map((item) => {
				if (this.setField != "stock" && this.setField != "spu") {
					item[this.setField] = Number(this.batchForm.field).toFixed(
						2
					);
				} else {
					item[this.setField] = this.batchForm.field;
				}
			});

			this.batchForm.field = "";
			this.batchVisible = false;
		},
		// 选择预设的规格
		handleSelectRule(ruleId) {
			this.rule.forEach((item) => {
				if (item.id == ruleId) {
					this.preItem = item.value;
				}
			});

			if (this.final.length > 0) {
				this.final = [];
			}
		},
		// 批量设置图片
		selectedBatchImg(img) {
			if (parseInt(this.selectImgIndex) >= 0) {
				this.final[parseInt(this.selectImgIndex)].image = img[0].url;
				this.selectImgIndex = -1;
			} else {
				this.final.map((item) => {
					item.image = img[0].url;
				});
			}

			this.batchDialogVisible = false;
		},
		// 选择单个图片
		setOneImg(index) {
			this.batchDialogVisible = true;
			this.selectImgIndex = index;
		},
		// 删过单个图片
		rmImg(index) {
			this.final[parseInt(index)].image = "";
		},
		// 选择规则里面的下一步
		ruleNext() {
			if (this.form.spec == 2 && this.final.length == 0) {
				this.$message.error("请生成多规格属性！");
				return false;
			}

			this.activeName = parseInt(this.activeName) + 1 + "";
		},
		// 保存
		async saveGoods() {
			this.attr_table.forEach((item) => {
				this.form.attr_item.push(item.item);
				this.form.attr_value.push(item.value);
			});
			this.form.label_id = this.label_id.join(",");
			// 去除空值
			this.form.preItem = this.trimSpace(this.preItem);
			this.form.final = this.final;

			let res;
			if (this.form.id) {
				res = await this.$API.goods.edit.post(this.form);
			} else {
				res = await this.$API.goods.add.post(this.form);
			}

			if (res.code == 0) {
				this.$message.success("操作成功");
			} else {
				this.$message.error(res.msg);
			}
		},
		// 过滤空值
		trimSpace(array) {
			for (let i = 0; i < array.length; i++) {
				let item = array[i].item;
				array[i].item = item.filter((s) => {
					return s && s.trim();
				});
			}
			return array;
		},
		// 选择商品参数
		handleSelectTpl(val) {
			if (!val) {
				this.attr_table = [];
				return;
			}

			this.attr.forEach((item) => {
				if (val == item.id) {
					let tableArr = [];
					let value = item.value.value;
					item.value.item.forEach((val, index) => {
						tableArr.push({
							item: val,
							value: value[index],
						});
					});

					this.attr_table = tableArr;
				}
			});
		},
		// 移除参数
		rmAttr(index) {
			this.attr_table.splice(index, 1);
		},
		// 添加参数
		addAttr() {
			this.attr_table.push({
				item: "",
				value: "",
			});
		},
		// 删除属性
		handleDel(index) {
			this.final.splice(index, 1);
		},
		// 选择卡密
		showCard() {
			this.cardVisible = true;
		},
		// 初始化
		async initEdit() {

			let res = await this.$API.goods.getEditInfo.get({ id: this.id });

			this.rule = res.data.rule
			this.cate = res.data.cate.map(item => {
				if (!item.children) {
					item.disabled = true;
				}

				return item;
			})
			this.seller_cate = res.data.seller_cate.map(item => {
				if (!item.children) {
					item.disabled = true;
				}

				return item;
			})
			this.attr = res.data.attr
			this.label = res.data.label
			this.tpl = res.data.tpl

			let ruleData = res.data.ruleData
			let extend = res.data.extend
			let info = res.data.info
			let attrData = res.data.attrData
			let content = res.data.content
			this.ensureList = res.data.ensure

			this.preItem = ruleData ? JSON.parse(ruleData.rule) : []
			let titleMap = [];
			this.preItem.forEach((item, index) => {
				let data = item.item.filter(function (s) {
					return s && s.trim();
				})
				if (item.title != '' && data.length > 0) {
					titleMap.push({ label: item.title, property: index })
				}
			})
			this.tableHead = titleMap
			extend.map(item => {
				return item.sku = item.sku.split('※')
			})
			this.final = extend

			if (info.user_label != '') {
				let labelMap = info.user_label.split(',')
				labelMap = labelMap.map(item => {
					return parseInt(item);
				})
				this.label_id = labelMap
			}

			attrData.forEach(item => {
				this.attr_table.push({
					item: item.name,
					value: item.value
				})
			})

			this.form = {
				id: info.id,
				type: info.type,
				cate_id: res.data.goods_cate,
				seller_cate_id: res.data.seller_goods_cate,
				name: info.name,
				sub_name: info.sub_name,
				unit: info.unit,
				slider_image: JSON.parse(info.slider_image),
				video_src: info.video_src,
				is_show: info.is_show + '',
				spec: info.spec + '',
				price: info.price,
				original_price: info.original_price,
				cost_price: info.cost_price,
				stock: info.stock,
				spu: info.spu,
				weight: info.weight,
				volume: info.volume,
				preItem: [],
				final: [],
				content: content.content,
				freight: info.freight,
				postage: info.postage,
				shipping_tpl_id: (info.shipping_tpl_id == 0) ? '' : info.shipping_tpl_id,
				seo_title: info.seo_title,
				seo_keywords: info.seo_keywords,
				seo_desc: info.seo_desc,
				attr_tpl_id: '',
				attr_item: [],
				attr_value: [],
				is_hot: info.is_hot + '',
				is_recommend: info.is_recommend + '',
				is_new: info.is_new + '',
				label_id: '',
				ensure: res.data.ensure_relation
			}
		},
		// 设置卡密
		async saveCard() {
			if (this.form.cardForm.type === 1) {
				if (this.form.cardForm.num <= 0) {
					this.$message.error("卡密数量应该大于0");
					return false;
				}

				if (this.form.cardForm.card_secret == "") {
					this.$message.error("卡密不能为空");
					return false;
				}
			}

			if (
				this.form.cardForm.type === 2 &&
				this.form.cardForm.card_no_list == ""
			) {
				this.$message.error("请输入卡密信息");
				return false;
			}

			if (this.form.cardForm.type === 1) {
				this.cardNum = this.form.cardForm.num;
			} else {
				this.cardNum =
					this.form.cardForm.card_no_list.split("\n").length;
			}

			this.cardVisible = false;
		},
	},
};
</script>

<style scoped>
.goods-type li {
	float: left;
	display: block;
	list-style: none;
	padding: 0;
	width: 120px;
	height: 60px;
	background-color: rgb(255, 255, 255);
	border: 1px solid rgb(226, 226, 226);
	overflow: hidden;
	cursor: pointer;
	position: relative;
	text-align: center;
	line-height: 113px;
}

.goods-type-active {
	border: 1px solid rgb(17, 161, 253) !important;
}

.goods-type-active div:first-child {
	color: rgb(17, 161, 253);
}

.goods-type li div {
	height: 25px;
	text-align: center;
	line-height: 25px;
}

.goods-type-active .icon {
	height: 40px;
	width: 40px;
	display: block;
	background-image: url(/public/img/success.png);
	background-position: 76px 78px;
	position: relative;
	right: -86px;
	top: -31px;
}

.goods-type .el-form-item__content {
	margin-left: 0 !important;
}

.img-list {
	height: 60px;
	padding-left: 0;
	margin-top: 0;
}

.img-list li:first-child {
	margin-left: 0;
}

.img-list li {
	width: 58px;
	height: 58px;
	float: left;
	margin-right: 5px;
	cursor: pointer;
	position: relative;
}

.addImg {
	height: 56px;
	width: 56px;
	line-height: 56px;
	text-align: center;
	border: 1px dashed rgb(221, 221, 221);
}

ul li {
	list-style: none;
}

.image-check-dialog .el-dialog__header {
	display: none;
}

.image-check-dialog .el-dialog__body {
	padding: 0;
}

.img-list .img-tools {
	position: absolute;
	width: 58px;
	height: 15px;
	line-height: 15px;
	text-align: center;
	top: 43px;
	background: rgba(0, 0, 0, 0.6);
	cursor: pointer;
}

.del-btn {
	color: #f56c6c;
	cursor: pointer;
	margin-left: 5px;
}

.item-tool {
	width: 50px;
	height: 30px;
	line-height: 30px;
	margin-top: 6px;
	cursor: pointer;
	color: #409eff;
}

.up-item-img {
	width: 40px;
	height: 40px;
	border: 1px dashed #c2c2c2;
	text-align: center;
	line-height: 40px;
	cursor: pointer;
}

.cell .img-tools {
	position: absolute;
	width: 40px;
	height: 15px;
	line-height: 15px;
	text-align: center;
	top: 33px;
	background: rgba(0, 0, 0, 0.6);
	cursor: pointer;
}

.tips {
	color: #999;
	margin-left: 80px;
	font-size: 12px;
	margin-bottom: 10px;
}

.del-btn {
	cursor: pointer;
	color: #f56c6c;
}

.add-btn {
	cursor: pointer;
	margin-top: 18px;
	color: #409eff;
}

.card-info {
	cursor: pointer;
	color: #409eff
}
</style>
